<template>
  <div class="headers w-full h-14 flex items-center  overflow-hidden justify-end px-8" style="border-bottom: 1px solid #ccc">
    <!-- 头像 -->
    <n-dropdown :options="options" @select="select">
      <div class="flex items-center">
        <span class="pl-2">登录人员: {{ user}}</span>
      </div>
    </n-dropdown>
  </div>
</template>

<script lang="ts" setup>

import {onMounted ,ref} from 'vue';
import { renderIcon } from "@/utils/index"
import { LogOutOutline } from "@vicons/ionicons5"
import { useRouter } from 'vue-router';
import { useMessage } from "naive-ui";
const router = useRouter();
const user = ref();
const message = useMessage();
onMounted(() => {
  user.value=window.localStorage.getItem('uName')
})
const options: any = [
   {
    label: '退出登录',
    key: 'logout',
    icon: renderIcon(LogOutOutline)
  },
]

const select = (key:string)=>{
  switch (key) {
    case 'logout':
      message.info("退出成功");
      setTimeout(() => {
        router.push("/");
      },1000);
      break;
  
    default:
      break;
  }
}





</script>

<style scoped lang=scss>
.headers {
  position:fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  background-color: #fff;
}
</style>